.active_bg {
  width: 100%;
  // min-height: 100vh;
  background: #faebe8 url('../../../images/valentine/bg.png') no-repeat;
  background-size: 100%;
  overflow-x: hidden;
  font-family: PingFang SC;
  position: relative;
  .back_icon {
    position: fixed;
    z-index: 20;
    top: 58px;
    left: 16px;
    width: 24px;
    height: 24px;
    background: url('../../../images/valentine/back_red.png') no-repeat;
    background-size: contain;
  }
  .flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active_content {
    margin-top: 317px;
    .record_btn {
      width: 143px;
      height: 40px;
      position: relative;
      left: -42px;
      .blur_bg {
        width: 100%;
        height: 100%;
        border-radius: 60px;
        border: 1px solid #fff;
        background: linear-gradient(90deg, #ff5656 0%, #ffa776 54.17%, #ff70c6 100%);
        filter: blur(5px);
      }
      .text {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        right: 22px;
        font-size: 14px;
      }
      flex-shrink: 0;
      color: #fff;
      text-align: center;
    }

    .gonggao {
      // margin-top: 30px;
      margin: 26px auto 0;
      width: 96%;
      height: 60px;
      // border: 2px solid #fff;
      background: url('../../../images/valentine/gonggao.png') no-repeat;
      background-size: contain;
      // border-radius: 60px;
      // border: 1px solid #FFF;
      // background: linear-gradient(90deg, #FF9696 0%, #FFCDB1 54.17%, #FFC9E9 100%);
      // filter: blur(5px);
      .con {
        width: 343px;
        box-sizing: border-box;
        padding: 0 14px;
        height: 20px;
        overflow: hidden;
      }
      .txt_list {
        flex: 1;
        text-align: center;
        height: 500px;
        transform: translateZ(0);
        animation: 80s wordsLoop linear infinite;
      }
      .txt {
        font-weight: 500;
        line-height: 20px;
        font-size: 14px;
        color: #fff;
        span {
          color: #ff7776;
        }
      }
      .icon {
        width: 28px;
        height: 28px;
        background: url('../../../images/valentine/audio.png') no-repeat;
        background-size: contain;
        &:first-of-type {
          transform: rotateY(180deg);
        }
      }
    }

    .xi_que_info {
      margin-top: 6px;
      color: #763838;
      font-size: 16px;
      div:nth-of-type(1) {
        opacity: 0.6;
        font-size: 14px;
      }
      div:last-of-type {
        margin-left: 4px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.4);
        font-size: 12px;
        padding: 4px 8px;
        color: #fe7c7c;
      }
      .icon {
        width: 20px;
        height: 20px;
        margin-left: 4px;
        background: url('../../../images/valentine/xique.png') no-repeat;
        background-size: contain;
        > img {
          width: 100%;
          font-size: 0;
        }
      }
    }

    .reward_content {
      position: relative;
      box-sizing: border-box;
      margin: 12px auto;
      width: 343px;
      height: 347px;
      background: url('../../../images/valentine/gifts_content_bg.png') no-repeat;
      background-size: contain;
      padding: 16px 14px;
      overflow: hidden;
      .reward_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .reward_box {
        box-sizing: border-box;
        padding: 8px;
        border-radius: 10px;
        margin-bottom: 12px;
        overflow: hidden;
        width: 74px;
        height: 70px;
        position: relative;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
        img {
          width: 100%;
          // height: 60px;
          // text-align: center;
        }
        &.hidden {
          opacity: 0;
          // display: none;
        }
        .num {
          position: absolute;
          z-index: 2;
          right: 2px;
          top: 2px;
          color: #f58181;
          font-weight: 600;
          font-size: 16px;
        }
      }
      .schedule_info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        .tit {
          .txt {
            width: 96px;
            height: 30px;
            background: url('../../../images/valentine/jingdu_text.png') no-repeat;
            background-size: contain;
          }
        }
        .love_point {
          width: 100px;
          height: 100px;
          &.a_0 {
            background: url('../../../images/valentine/love_sprites.png') -0px -0px no-repeat;
            background-size: cover;
          }
          &.a_10 {
            background: url(../../../images/valentine/love_sprites.png) -100px -0px no-repeat;
            background-size: cover;
          }
          &.a_20 {
            background: url(../../../images/valentine/love_sprites.png) -200px -0px no-repeat;
            background-size: cover;
          }
          &.a_30 {
            background: url(../../../images/valentine/love_sprites.png) -300px -0px no-repeat;
            background-size: cover;
          }
          &.a_40 {
            background: url(../../../images/valentine/love_sprites.png) -400px -0px no-repeat;
            background-size: cover;
          }
          &.a_50 {
            background: url(../../../images/valentine/love_sprites.png) -500px -0px no-repeat;
            background-size: cover;
          }
          &.a_60 {
            background: url(../../../images/valentine/love_sprites.png) -600px -0px no-repeat;
            background-size: cover;
          }
          &.a_70 {
            background: url(../../../images/valentine/love_sprites.png) -700px -0px no-repeat;
            background-size: cover;
          }
          &.a_80 {
            background: url(../../../images/valentine/love_sprites.png) -800px -0px no-repeat;
            background-size: cover;
          }
          &.a_90 {
            background: url(../../../images/valentine/love_sprites.png) -900px -0px no-repeat;
            background-size: cover;
          }
          &.a_100 {
            background: url(../../../images/valentine/love_sprites.png) -900px -0px no-repeat;
            background-size: cover;
          }
        }
        .point {
          .unit {
            width: 21px;
          }
          .num {
            color: #763838;
            font-size: 20px;
            text-align: center;
          }
          // .a_1 {
          //   width: 13px;
          //   height: 30px;
          //   background: url("../../../images/valentine/num_css_sprites.png") -24px 0 no-repeat;
          //   background-size: cover;
          // }
        }
      }
    }

    .buy_groups {
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 0 14px;
      margin-top: 8px;
      .btn {
        width: 111px;
        height: 52px;
        &:active {
          transform: scale(0.9);
          transition-duration: 300ms;
        }
      }
      &.type_2 {
        .btn {
          &.once {
            background: url('../../../images/valentine/once.png') no-repeat;
            background-size: contain;
          }
          &.oncex10 {
            background: url('../../../images/valentine/oncex10.png') no-repeat;
            background-size: contain;
          }
          &.oncex100 {
            background: url('../../../images/valentine/oncex100.png') no-repeat;
            background-size: contain;
          }
        }
      }
      &.type_1 {
        .btn {
          &.once {
            background: url('../../../images/valentine/pink_1.png') no-repeat;
            background-size: contain;
          }
          &.oncex10 {
            background: url('../../../images/valentine/pink_10.png') no-repeat;
            background-size: contain;
          }
          &.oncex100 {
            background: url('../../../images/valentine/pink_100.png') no-repeat;
            background-size: contain;
          }
        }
      }
    }

    .rule {
      color: #763838;
      width: 343px;
      font-size: 12px;
      margin: 24px auto 108px;
      line-height: 20px;
      .c {
        font-weight: 500;
      }
      .t {
        font-weight: 600;
        text-align: center;
        font-size: 16px;
        padding-bottom: 6px;
      }
      .rule_img {
        margin-top: 12px;
        img {
          width: 100%;
        }
      }
    }
  }

  .tag_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 36px;
    .item {
      width: 136px;
      height: 74px;
      img {
        width: 100%;
        height: 100%;
      }
      &.active {
        width: 144px;
        height: 80px;
      }
    }
  }

  .no_monay_modal {
    .adm-modal-body {
      width: 278px;
      height: 263px;
      position: relative;
    }
    .no_more {
      width: 139px;
      height: 35px;
      margin: 125px auto 0;
    }
    &.a_1 {
      .adm-modal-body {
        background: url('../../../images/valentine/no_money_bg1.png') no-repeat;
        background-size: contain;
      }
      .no_more {
        background: url('../../../images/valentine/no_more-txt1.png') no-repeat;
        background-size: contain;
      }
    }
    &.a_2 {
      .adm-modal-body {
        background: url('../../../images/valentine/no_money_bg2.png') no-repeat;
        background-size: contain;
      }
      .no_more {
        background: url('../../../images/valentine/no_more-txt2.png') no-repeat;
        background-size: contain;
      }
    }
    &.money {
      .adm-modal-body {
        background: url('../../../images/valentine/no_money_bg.png') no-repeat;
        background-size: contain;
      }
      .no_more {
        background: url('../../../images/valentine/no_more-txt.png') no-repeat;
        background-size: contain;
      }
    }
  }

  .gift_modal {
    .adm-space {
      display: none;
    }
    .adm-modal-body {
      box-sizing: border-box;
      border: 2px solid #fff;
      background: transparent;
      padding: 6px;
      width: 278px;
      height: 300px;
      border-radius: 18px;

      // background: url("../../../images/valentine/simple_gif_bg.png") no-repeat;
      // background-size: cover;
      // position: relative;
      .adm-modal-content {
        padding: 0;
        max-height: 290px;
        border-radius: 18px;
        box-sizing: border-box;
        background: linear-gradient(180deg, #ffb4b4 0%, #ffe2e2 117.61%);
      }
      .gift_data {
        padding: 0;
        margin: 8px;
        box-sizing: border-box;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 118.66%);
      }
      .gift_box_img {
        width: 144px;
        height: 144px;
        position: absolute;
        top: -42px;
        right: -14px;
        background: url('../../../images/valentine/gif_box.png') no-repeat;
        background-size: cover;
      }
      .gift_data {
        padding: 0.1px;
        // height: 100%;
        .box_tit {
          overflow: hidden;
          width: 101px;
          height: 35px;
          margin: 8px 0 2px 19px;
          background: url('../../../images/valentine/reward_box_tit.png') no-repeat;
          background-size: contain;
        }
        .price {
          margin: 0 0 0 19px;
          color: #ff862e;
          font-size: 12px;
          font-weight: 400;
        }
        .gift_list {
          margin: 30px 30px 0 30px;
          // display: flex;
          // flex-wrap: wrap;
          .item {
            display: inline-flex;
            flex-direction: column;
            width: 60px;
            text-align: center;
            color: #763838;
            font-size: 12px;
            position: relative;
            margin-right: 14px;
            margin-bottom: 8px;
            &:nth-of-type(3n) {
              margin-right: 0;
            }
            .nums {
              font-size: 12px;
              color: #fff;
              background-color: #ff6d6d;
              border-radius: 6px 6px 6px 0;
              padding: 2px 4px;
              position: absolute;
              right: -6px;
            }
            img {
              width: 100%;
              // height: 100;
              font-size: 0;
              margin-bottom: 6px;
            }
            .item_price {
              opacity: 0.6;
              font-size: 12px;
              // height: 12px;
              transform: scale(0.85);
              text-align: center;
            }
          }
          &.item_1 {
            display: flex;
            align-items: center;
            .item {
              width: 121px;
              margin: 0 auto;
            }
          }
          &.item_2 {
            display: flex;
            justify-content: space-between;
            margin: 40px 34px 0 30px;
            .item {
              width: 95px;
            }
          }
        }
      }
    }
    &.long_wrap {
      .adm-modal-body {
        // height: 80vh;
        height: 400px;
        // background: url("../../../images/valentine/long_gift_bg.png") no-repeat;
        // background-size: 100%;
        // position: relative;
        .adm-modal-content {
          max-height: 400px;
          // overflow: hidden;
          .gift_data {
            // height: 303px;
            // height: 390px;
            // overflow-y: hidden;
          }
        }
        .gift_list {
          margin: 21px 8px 0 8px;
          height: 40vh;
          overflow-y: scroll;
          .item {
            min-height: 90px;
          }
        }
      }
    }
    &.special_reward {
      .adm-modal-body {
        // background: url("../../../images/valentine/special_bg.png") no-repeat;
        // background-size: cover;
        .gift_data {
          .box_tit {
            background: url('../../../images/valentine/reward_box_tit2.png') no-repeat;
            background-size: contain;
          }
        }
      }
    }
  }

  .buy_modal {
    .adm-modal-body {
      width: 282px;
      height: 300px;
      background: url('../../../images/valentine/buy_bg.png') no-repeat;
      background-size: contain;

      .tit_txt {
        width: 74px;
        height: 35px;
        background: url('../../../images/valentine/buy-tit.png') no-repeat;
        background-size: contain;
        margin: 6px auto 0;
      }
      .box_img {
        margin: 6px auto 0;
        width: 85px;
        height: 85px;
        img {
          width: 100%;
          height: 100%;
        }
        // background: url('../../../images/valentine/red.png') no-repeat;
        // background-size: contain;
      }
      .input_content {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 12px;
        .input {
          border-radius: 30px;
          background: rgba(255, 255, 255, 0.4);
          width: 84px;
          height: 24px;
          margin: 0 8px;
          input {
            width: 84px;
            height: 24px;
            color: #763838;
            font-weight: 500;
            text-align: center;
            caret-color: #763838;
          }
        }
        .bt {
          width: 24px;
          height: 24px;
          &.add {
            background: url('../../../images/valentine/add.png') no-repeat;
            background-size: contain;
          }
          &.down {
            background: url('../../../images/valentine/down.png') no-repeat;
            background-size: contain;
          }
        }
      }
      .money {
        margin-top: 12px;
        color: #763838;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-align: center;
      }
    }
  }
  .adm-modal-body {
    .btn_group {
      position: absolute;
      bottom: 34px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: space-between;
      .cancel {
        width: 112px;
        height: 44px;
        border-radius: 42px;
        // border: 1px solid #FFFDFC;
        // box-shadow: 0px 4px 4px 0px rgba(245, 129, 129, 0.40);
        margin-right: 12px;
        background: url('../../../images/valentine/cancel_btn_bg.png') no-repeat;
        background-size: cover;
      }
      .buy {
        width: 112px;
        height: 52px;
        background: url('../../../images/valentine/bug_btn_bg.png') no-repeat;
        background-size: cover;
      }
    }
  }

  .record_modal {
    .adm-space {
      display: none;
    }
    .adm-center-popup-wrap {
      max-width: 330px;
      width: 330px;
      // height: 428px;
    }
    .adm-modal-body {
      width: auto;
      border: 2px #fff solid;
      border-radius: 20px;
      background: transparent;
      padding: 6px;
      margin: 0;
      // background: url('../../../images/valentine/record_bg.png') no-repeat;
      // background-size: contain;
      .adm-modal-content {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        height: 100%;
        border-radius: 20px;
        background: linear-gradient(180deg, #ffb4b4 0%, #ffe2e2 117.61%);
      }
    }
  }
  .record {
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 118.66%);

    // background: url('../../../images/valentine/record_bg.png') no-repeat;
    // background-size: contain;
    // border: var(--modal-border);
    // border-radius: 40px;
    // height: 380px;
    margin: 12px 10px;
    border-radius: 20px;
    padding: 18px 24px 18px 24px;
    position: relative;
    .tit {
      text-align: center;
      font-weight: 500;
      font-size: 18px;
      line-height: 25px;
      color: #763838;
      margin: 0px 0 10px 0;
    }
    .list {
      // height: 48vh;
      height: 300px;
      box-sizing: border-box;
      overflow-y: scroll;
      .item_data {
        margin-bottom: 12px;
      }
      .item {
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #763838;
        .info {
          .name {
            font-size: 14px;
            line-height: 20px;
          }
        }
        .time,
        .note {
          color: #763838;
          opacity: 0.6;
          font-size: 12px;
          transform: scale(0.86);
          margin-left: -4px;
        }
        .note {
          text-align: right;
          width: 90px;
        }
      }
      .more_note {
        margin-top: 4px;
        color: #763838;
        opacity: 0.6;
        line-height: 20px;
        padding: 12px;
        font-size: 12px;
        box-sizing: border-box;
        background: rgba(#fe7c7c, 0.2);
        border-radius: 20px 0 20px 20px;
      }
    }
  }

  .special_reward {
    width: 285px;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .txt {
      width: 100%;
      height: 64px;
      background: url('../../../images/valentine/special_awards_text.png') no-repeat;
      background-size: contain;
    }
    .img {
      width: 100%;
      background: url('../../../images/valentine/special_award_img.png') no-repeat;
      background-size: contain;
      height: 280px;
    }
    .btn {
      width: 111px;
      height: 50px;
      background: url('../../../images/valentine/special_award_btn.png') no-repeat;
      background-size: contain;
    }
  }
}

.product_wrap {
  background-color: #fff4f2;
  min-height: 100vh;

  .navbar_content {
    .close {
      display: none;
    }
    .icon {
      margin-right: 26px;
      width: 24px;
      height: 24px;
      background: url('../../../images/valentine/back_brown.png') no-repeat;
      background-size: contain;
    }
  }
  .navbar_title {
    color: #763838;
  }
  .useInfo {
    margin: 16px 20px;
    display: flex;
    align-items: center;
    .avatar {
      width: 60px;
      height: 60px;
      overflow: hidden;
      border-radius: 50%;
      background-color: #ffbaaf;
      margin-right: 8px;
      img {
        width: 100%;
      }
    }
    .nickname {
      color: #763838;
      opacity: 0.6px;
      font-weight: 400;
      line-height: 17px;
    }
    .nums-txt {
      color: #763838;
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      .btn {
        display: inline-block;
        width: 65px;
        height: 25px;
        text-align: center;
        line-height: 25px;
        font-size: 12px;
        color: #f58181;
        background: rgba(#f58181, 0.1);
        border-radius: 20px;
        font-weight: 400;
      }
    }
  }
  .content_list {
    margin: 0 20px;
    display: flex;
    flex-wrap: wrap;
    .item {
      margin-right: 16px;
      margin-bottom: 12px;
      text-align: center;
      border-radius: 12px;
      width: 100px;
      height: 172px;
      background: rgba(#ffbaaf, 0.2);
      overflow: hidden;
      .img {
        width: 80px;
        height: 80px;
        margin: 16px auto 8px;
        background-color: ghostwhite;
        img {
          width: 100%;
        }
      }
      .name {
        color: #763838;
        font-size: 12px;
        line-height: 17px;
      }
      .price {
        color: rgba(#763838, 0.4);
        font-size: 12px;
        padding: 2px 0 4px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 12px;
          height: 12px;
          background: url('../../../images/valentine/xique.png') no-repeat;
          background-size: contain;
        }
      }
      .btn {
        width: 53px;
        height: 24px;
        background: url('../../../images/valentine/duihuan.png') no-repeat;
        background-size: cover;
        margin: 0 auto;
      }
      &:nth-of-type(3n) {
        margin-right: 0;
      }
    }
  }
}

::-webkit-scrollbar {
  width: 0;
}

@keyframes wordsLoop {
  0% {
    transform: translateY(0%);
    -webkit-transform: translateY(0%);
  }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateY(-100%);
  }
}

// 记录

.record_wrap {
  background-color: #fff4f2;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0.1px;
  box-sizing: border-box;
  padding-top: 22px;
  .navbar_content {
    .close {
      display: none;
    }
    .icon {
      margin-right: 26px;
      width: 24px;
      height: 24px;
      background: url('../../../images/valentine/back_brown.png') no-repeat;
      background-size: contain;
    }
  }
  .navbar_title {
    color: #763838;
  }
  .content {
    width: 343px;
    height: calc(100vh - 65px);
    overflow-y: scroll;
    margin: 0 auto;
    .item {
      width: 100%;
      height: 60px;
      background-color: rgba(#ffbaaf, 0.4);
      border-radius: 12px;
      overflow: hidden;
      color: #763838;

      display: flex;
      align-items: center;
      margin-bottom: 10px;

      img {
        width: 50px;
        height: 50px;
        margin-left: 12px;
      }
      .info {
        flex: 1;
        margin-left: 12px;
      }
      .name {
        font-weight: 500;
        font-size: 16px;
        padding-bottom: 6px;
      }
      .time {
        font-size: 12px;
        margin-right: 12px;
      }
      .price {
        display: flex;
        align-items: center;
        span {
          opacity: 0.4;
        }
        .icon {
          width: 12px;
          height: 12px;
          background: url('../../../images/valentine/xique.png') no-repeat;
          background-size: contain;
        }
      }
    }
  }
}
